<template>
  <div class="content">
    <swiper ref="mySwiper" :options="swiperOption">
      <swiper-slide v-for="(page, index) in iconPages" :key="index">
        <div class="img-list">
          <div class="img-wrap" v-for="img in page" :key="img.id">
            <img :src="img.imgUrl" />
            <p class="img-name">{{ img.desc }}</p>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  props: {
    iconlist: Array
  },
  data() {
    return {
      swiperOption: { autoPlay: false }
    }
  },
  computed: {
    iconPages() {
      var arrPages = []
      this.iconlist.forEach((item, index) => {
        let page = Math.floor(index / 8)
        if (!arrPages[page]) {
          arrPages[page] = []
        }
        arrPages[page].push(item)
      })
      return arrPages
    }
  }
}
</script>
<style lang="less" scoped>
@import '~styles/varibles.less';
@import '~styles/mixins.less';
.content {
  padding-bottom: 50%;
  overflow: hidden;
  height: 0;
  .img-list {
    display: flex;
    flex-wrap: wrap;
    .img-wrap {
      width: 25%;
      padding-bottom: 25%;
      height: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        margin-top: 10px;
        width: 55.5px;
        height: 55.5px;
      }
      .img-name {
        margin-top: 10px;
        color: @text;
      }
    }
  }
}
</style>
